
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="common.css">
<title>Angular file upload sample</title>
<script src="js/angular-file-upload-shim.js"></script>
<script type="text/javascript">
// load angularjs specific version
var angularVersion = window.location.hash.substring(1);
document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/' + (angularVersion || '1.2.0') + '/angular.js"><\/script>');
</script>
<script src="js/angular-file-upload.js"></script>
<script src="js/upload.js"></script>
<!-- <script src="http://cdn.jsdelivr.net/angular.file-upload/1.0.0/angular-file-upload.min.js"></script> -->
</head>

<body ng-app="fileUpload" ng-controller="MyCtrl">
	<div class="ng-v">
		Angular Version: <input type="text" ng-model="angularVersion"> 
		<input type="button" data-ng-click="changeAngularVersion()" value="Go">
	</div>
	<h1>Angular file upload Demo</h1>
	<h3>
		Visit <a href="https://github.com/danialfarid/angular-file-upload">angular-file-upload</a> on github
	</h3>
	<div class="upload-div">
		http method: <input type="radio" ng-model="httpMethod" ng-init="httpMethod = 'POST'" value="POST"/>post <input type="radio" ng-model="httpMethod" value='PUT'/>put<br/>
		<br/>
		How to upload:<br/>
		<label><input type="radio" name="howToSend" ng-model="howToSend" value="1" ng-init="howToSend = 1">Multupart/form-data upload using $upload.upload() service cross browser</label>
		<br/>
		<label><input type="radio" name="howToSend" ng-model="howToSend" value="2" ng-disabled="!dropSupported">File binary content with the file type as Content-Type header using $upload.http() service</label>
		<div class="sub">The second option could be used to upload files to <a href="https://github.com/danialfarid/angular-file-upload/issues/88">CouchDB</a>, 
			<a href="https://github.com/danialfarid/angular-file-upload/issues/87">imgur</a>, etc... for HTML5 FileReader browsers.<br/>
			Option 2 cross browser FileReader and image preview will be added around Feb 2014 when FileAPI FileReader support is available.<br/>
		</div><br/>
		 myModel: <input type="text" ng-model="myModel"> model object to be sent with the file.<br/>
		choose a single file: <input type="file" ng-file-select="onFileSelect($files)">
		<br/>
		or multiple files: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="file" ng-file-select="onFileSelect($files)" multiple>
		<br/>
		<br/>
		<div ng-show="dropSupported" class="drop-box" ng-file-drop="onFileSelect($files);" ng-file-drop-available="dropSupported=true">or drop files here</div>
		<div ng-show="!dropSupported">HTML5 Drop File is not supported on this browser</div>
		<br/>
		<input type="checkbox" ng-model="uploadRightAway">Upload right away
		<br/>
		<br/>
		Progress:
		<br/>
		<br/>
		<div ng-show="selectedFiles != null">
			<div class="sel-file" ng-repeat="f in selectedFiles">
				<img ng-show="dataUrls[$index]" ng-src="{{dataUrls[$index]}}">
				<button class="button" ng-click="start($index)" ng-show="progress[$index] < 0">Start</button>
				<span class="progress" ng-show="progress[$index] >= 0">						
					<div style="width:{{progress[$index]}}%">{{progress[$index]}}%</div>
				</span>				
				<button class="button" ng-click="abort($index)" ng-show="hasUploader($index) && progress[$index] < 100">Abort</button>
				{{f.name}} - size: {{f.size}}B - type: {{f.type}}
			</div>
		</div>
		<div class="response" ng-show="uploadResult.length > 0">
			Server Response:
			<ul>
				<li ng-repeat="result in uploadResult">
					<ul>
						<li ng-repeat="item in result">
							<div data-ng-show="item.name">file name: {{item.name}}</div>
							<div data-ng-show="item.fieldName">name: {{item.fieldName}}</div>
							<div data-ng-show="item.size">size on the serve: {{item.size}}</div>
							<div data-ng-show="item.value">value: {{item.value}}</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div style="position:absolute;bottom:10px;right:10px;font-size:smaller;color:#777">Last update: 2013-12-30</div>
</body>
</html>
